Amazon Cognito Hosted UIのサインアップ時、ユーザーがMFAタイプを選択できるようにする方法

Amazon Cognito Hosted UIのサインアップ時、ユーザーがMFAタイプを選択できるようにする方法

Clock Icon2024.08.29

はじめに

本記事では、Amazon Cognito Hosted UIのサインアップ時に、ユーザー側で2つのMFAタイプ(SMS・Authenticatorアプリケーション)から登録するMFAを選択する方法をご紹介します。

具体例として、ALBとEC2を組み合わせた構成に、CognitoのHosted UIによる認証を実装します。

b0e2292194258a9d31a14f4ff2a6f487

以下の記事を参考にしました。

https://dev.classmethod.jp/articles/alb-ec2-cognito-hosted-ui-2023/

SMS送信が優先されるケース

通常、2つのMFAタイプを有効化してユーザープールを作成した場合、サインアップ時にユーザーがMFAタイプを選択することができず、SMSで登録されてしまいます。
ここでは、実際にSMSで登録される挙動を確認してみましょう。

以下の2つのMFAタイプを有効化してユーザープールを作成します。

cm-hirai-screenshot 2024-08-27 8.29.08
サインイン画面に遷移します。
cm-hirai-screenshot 2024-08-20 9.49.31

サインアップするため、[Sign up]に遷移します。

  • 名前、電話番号、メールアドレス、パスワードを登録します。

cm-hirai-screenshot 2024-08-20 9.51.35

メールアドレスに6桁の認証コードが送られます。

cm-hirai-screenshot 2024-08-20 9.53.18

6桁を入力するとユーザーのEメールが検証済みとなります。

cm-hirai-screenshot 2024-08-20 9.52.17

電話番号にもSMS送信され、6桁を入力すると、ユーザーの電話番号が検証済みとなります。
cm-hirai-screenshot 2024-08-20 9.54.46

[Sign in]を入力すると、EC2のWebサーバーの内容が表示されます。
cm-hirai-screenshot 2024-08-20 9.56.44

このように、MFAタイプはSMSとAuthenticatorアプリケーションのどちらで登録するか選択できず、SMS送信で登録されました。

SMS送信が優先される理由

SMS送信が優先される理由は、AWSが公開している情報からは確認できませんでした。

おそらく必須属性に電話番号があるため、SMSが優先されると推測します。

どのような方法で実装すれば実現できるか

AWSのドキュメントによると、SMSとAuthenticatorアプリケーションの2つのMFAを有効化している場合、Hosted UIで登録するMFAタイプは選択可能と記載があります。

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-settings-mfa.html?icmpid=docs_cognito_console_help_panel

実装方法は、AWSドキュメントには記載されていないため、実際にユーザープールを作成して試したところ、実現方法を見つけました。

サインアップ時にユーザー側でMFAタイプを選択する方法は、以下の通りです。

  1. 「 MFA なし」を選択しユーザープールを作成します。電話番号を必須属性としないユーザープールを作成することができます。
  2. 作成後、「 MFA を必須にする」を選択し、SMS と Authenticator アプリケーションの 2 つの MFA を有効化します。
  3. この状態で Hosted UI からサインアップを行うと、ユーザーは SMS と Authenticator アプリケーションのどちらを MFA として使用するか選択することができます。

実際に試してみます。

ユーザープール作成

サインインオプションで選択する属性は任意です。電話番号を選択しても必須属性にはならないため、問題ありません。
cm-hirai-screenshot 2024-08-27 8.05.12
[MFAなし]を選択します。
cm-hirai-screenshot 2024-08-27 8.05.17
必須属性に電話番号が入っていないことを確認します。
cm-hirai-screenshot 2024-08-27 8.05.24
Eメールプロバイダーの選択は任意です。
cm-hirai-screenshot 2024-08-27 8.05.30
アプリケーション統合の設定は、以下の通り行いました。

cm-hirai-screenshot 2024-08-27 8.05.44
cm-hirai-screenshot 2024-08-27 8.05.53
これでユーザープールを作成します。

ユーザープール編集

次に、作成したユーザープールのMFA設定を有効化します。[編集]をクリックします。
cm-hirai-screenshot 2024-08-27 8.10.18
2つのMFAタイプを選択すると、CognitoがSMS送信時に必要なIAMロールを設定するための[SMSの設定]画面が表示されますので、クリックします。cm-hirai-screenshot 2024-08-27 8.10.31
IAMロールは新規作成または既存のものから選択し、設定を保存します。
cm-hirai-screenshot 2024-08-27 8.10.46
MFAの設定画面に戻り、[変更を保存]をクリックします。しかし、[SMSの設定]が反映されていないためエラーが発生しますので、[キャンセル]をクリックしてください。cm-hirai-screenshot 2024-08-27 8.11.13
再度編集すると、[SMSの設定]が反映されており、MFAタイプのうちSMSメッセージが有効化されています。Authenticatorアプリケーションも有効化し、保存します。
cm-hirai-screenshot 2024-08-27 8.11.32

試してみる

2つのMFAタイプを選択して登録できるか確認します。

Hosted UIのサインアップ画面に遷移します。
cm-hirai-screenshot 2024-08-27 8.17.23
サインアップ情報を入力します。なお、電話番号は必須属性ではないため、入力欄がありません。
cm-hirai-screenshot 2024-08-27 8.17.58
Eメールに送信された6桁の認証コードを入力します。
cm-hirai-screenshot 2024-08-27 8.20.35
本記事の目的である「ユーザーが登録するMFAタイプを選択できるようにする」が実現できました。ここでは例としてSMSを選択してみます。
cm-hirai-screenshot 2024-08-27 8.18.38
SMS認証のための電話番号を入力します。
cm-hirai-screenshot 2024-08-27 8.18.53
SMSで電話番号に送信された6桁の認証コードを入力します。
cm-hirai-screenshot 2024-08-27 8.19.26
認証コードの入力後、ログインが成功し、目的のWebサイトにアクセスできました。
cm-hirai-screenshot 2024-08-27 8.20.50

ちなみに、Hosted UIでは、デフォルトで電話番号とAuthenticatorアプリケーションの両方を同時に登録することはできません。両方を使用したい場合は、サインイン画面を開発する必要があります。

Authenticator アプリケーションが優先されるケース

補足:MFAをAuthenticatorアプリケーションのみに設定し、必須属性から電話番号を除外した状態でユーザープールを作成した後、MFAタイプにSMSを追加した場合、MFAの登録はAuthenticatorアプリケーションが優先されました。
cm-hirai-screenshot 2024-08-28 8.32.03
cm-hirai-screenshot 2024-08-28 8.32.15
cm-hirai-screenshot 2024-08-28 8.40.02

まとめ

本記事では、Amazon Cognito Hosted UIを使用して、ユーザー側で登録するMFAタイプ(SMSとAuthenticatorアプリケーション)を選択させる方法について解説しました。主なポイントは以下の通りです

  1. ユーザープール作成時に、MFAタイプを有効にしても、サインアップ画面でユーザーが登録するMFAタイプを選択できません。
  • ユーザープール作成時に、SMSを有効化すると、SMSが優先されます。
  • ユーザープール作成時に、Authenticatorアプリケーションのみ有効化すると、Authenticatorアプリケーションが優先されます。
  1. 以下の手順によって、サインアップ時に、ユーザーが希望するMFAタイプを選択できるようになります。

    • 「MFAなし」を選択し、電話番号を必須属性としないユーザープールを作成する。
    • ユーザープール作成後、MFA設定を更新し、SMSとAuthenticatorアプリケーションの両方を有効にする。
  2. ただし、Hosted UIでは電話番号とAuthenticatorアプリケーションの両方を同時に登録することはできません。両方を使用したい場合は、サインイン画面の開発が必要です。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.